<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>贪吃蛇游戏</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #000;
            margin: 0;
        }
        canvas {
            border: 1px solid #fff;
            background-color: #111;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    <script>
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');

        let snake = [{x: 200, y: 200}];
        let dx = 10;
        let dy = 0;
        let food = {x: 0, y: 0};
        let score = 0;

        function randomFood(min, max) {
            return Math.round((Math.random() * (max-min) + min) / 10) * 10;
        }

        function createFood() {
            food.x = randomFood(0, canvas.width - 10);
            food.y = randomFood(0, canvas.height - 10);
        }

        function drawSnake() {
            snake.forEach(drawSnakePart);
        }

        function drawSnakePart(part) {
            ctx.fillStyle = 'limegreen';
            ctx.strokeStyle = 'darkgreen';
            ctx.fillRect(part.x, part.y, 10, 10);
            ctx.strokeRect(part.x, part.y, 10, 10);
        }

        function drawFood() {
            ctx.fillStyle = 'red';
            ctx.strokeStyle = 'darkred';
            ctx.fillRect(food.x, food.y, 10, 10);
            ctx.strokeRect(food.x, food.y, 10, 10);
        }

        function changeDirection(event) {
            const LEFT_KEY = 37;
            const RIGHT_KEY = 39;
            const UP_KEY = 38;
            const DOWN_KEY = 40;

            const keyPressed = event.keyCode;
            const goingUp = dy === -10;
            const goingDown = dy === 10;
            const goingRight = dx === 10;
            const goingLeft = dx === -10;

            if (keyPressed === LEFT_KEY && !goingRight) {
                dx = -10;
                dy = 0;
            }

            if (keyPressed === UP_KEY && !goingDown) {
                dx = 0;
                dy = -10;
            }

            if (keyPressed === RIGHT_KEY && !goingLeft) {
                dx = 10;
                dy = 0;
            }

            if (keyPressed === DOWN_KEY && !goingUp) {
                dx = 0;
                dy = 10;
            }
        }

        document.addEventListener('keydown', changeDirection);

        function moveSnake() {
            const head = { x: snake[0].x + dx, y: snake[0].y + dy };
            snake.unshift(head);

            const didEatFood = snake[0].x === food.x && snake[0].y === food.y;
            if (didEatFood) {
                score += 10;
                createFood();
            } else {
                snake.pop();
            }
        }

        function checkCollision() {
            for (let i = 4; i < snake.length; i++) {
                if (snake[i].x === snake[0].x && snake[i].y === snake[0].y) return true;
            }
            const hitLeftWall = snake[0].x < 0;
            const hitRightWall = snake[0].x > canvas.width - 10;
            const hitToptWall = snake[0].y < 0;
            const hitBottomWall = snake[0].y > canvas.height - 10;

            return hitLeftWall || hitRightWall || hitToptWall || hitBottomWall;
        }

        function clearCanvas() {
            ctx.fillStyle = '#111';
            ctx.strokeStyle = '#fff';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            ctx.strokeRect(0, 0, canvas.width, canvas.height);
        }

        function main() {
            if (checkCollision()) return;

            clearCanvas();
            drawFood();
            moveSnake();
            drawSnake();
        }

        function reset() {
            snake = [{x: 200, y: 200}];
            dx = 10;
            dy = 0;
            score = 0;
            createFood();
            clearCanvas();
            drawFood();
            drawSnake();
        }

        createFood();
        drawSnake();

        setInterval(main, 100);
    </script>
</body>
</html>
